<template>
  <div class="order-detail">
    <el-form :model="formData" ref="form" label-width="100px" size="small">
      <el-row>
        <el-col :span="8">
          <el-form-item label="发货单号" prop="documentCode">
            <span v-if="!isEdit">{{ formData.documentCode }}</span>
            <el-input v-else v-model="formData.documentCode" placeholder="请输入发货单号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="平台单号" prop="platformOrderCode">
            <span v-if="!isEdit">{{ formData.platformOrderCode }}</span>
            <el-input v-else v-model="formData.platformOrderCode" placeholder="请输入平台单号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺名称" prop="shopName">
            <span v-if="!isEdit">{{ formData.shopName }}</span>
            <el-select v-else v-model="formData.shopName" placeholder="请选择店铺名称" filterable remote
              :remote-method="remoteShopSearch" clearable>
              <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="会员名称" prop="memberName">
            <span v-if="!isEdit">{{ formData.memberName }}</span>
            <el-input v-else v-model="formData.memberName" placeholder="请输入会员名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓库名称" prop="warehouseName">
            <span v-if="!isEdit">{{ formData.warehouseName }}</span>
            <el-select v-else v-model="formData.warehouseName" placeholder="请选择仓库" filterable clearable>
              <el-option v-for="item in warehouseOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流单号" prop="logisticsCode">
            <span v-if="!isEdit">{{ formData.logisticsCode }}</span>
            <el-input v-else v-model="formData.logisticsCode" placeholder="请输入物流单号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="标准重量" prop="standardWeight">
            <span v-if="!isEdit">{{ formData.standardWeight }}</span>
            <el-input-number v-else v-model="formData.standardWeight" :precision="2" :step="0.1" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流成本" prop="logisticsCost">
            <span v-if="!isEdit">{{ formData.logisticsCost }}</span>
            <el-input-number v-else v-model="formData.logisticsCost" :precision="2" :step="0.01" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流费用" prop="logisticsFee">
            <span v-if="!isEdit">{{ formData.logisticsFee }}</span>
            <el-input-number v-else v-model="formData.logisticsFee" :precision="2" :step="0.01" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品数量" prop="goodsQuantity">
            <span v-if="!isEdit">{{ formData.goodsQuantity }}</span>
            <el-input-number v-else v-model="formData.goodsQuantity" :min="0" :precision="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单金额" prop="orderAmount">
            <span v-if="!isEdit">{{ formData.orderAmount }}</span>
            <el-input-number v-else v-model="formData.orderAmount" :precision="2" :step="0.01" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付金额" prop="payAmount">
            <span v-if="!isEdit">{{ formData.payAmount }}</span>
            <el-input-number v-else v-model="formData.payAmount" :precision="2" :step="0.01" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="让利金额" prop="discountAmount">
            <span v-if="!isEdit">{{ formData.discountAmount }}</span>
            <el-input-number v-else v-model="formData.discountAmount" :precision="2" :step="0.01" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="买家留言" prop="buyerMessage">
            <span v-if="!isEdit">{{ formData.buyerMessage }}</span>
            <el-input v-else v-model="formData.buyerMessage" type="textarea" :rows="2" placeholder="请输入买家留言"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="卖家备注" prop="sellerRemark">
            <span v-if="!isEdit">{{ formData.sellerRemark }}</span>
            <el-input v-else v-model="formData.sellerRemark" type="textarea" :rows="2" placeholder="请输入卖家备注"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="二次备注" prop="secondRemark">
            <span v-if="!isEdit">{{ formData.secondRemark }}</span>
            <el-input v-else v-model="formData.secondRemark" type="textarea" :rows="2" placeholder="请输入二次备注"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button v-if="!isEdit" type="primary" @click="handleEdit">编辑</el-button>
        <template v-else>
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'OrderDetail',
  props: {
    deliveryOrderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      isEdit: false,
      formData: {
        documentCode: '',
        platformOrderCode: '',
        shopName: '',
        memberName: '',
        warehouseName: '',
        logisticsCode: '',
        standardWeight: 0,
        logisticsCost: 0,
        logisticsFee: 0,
        goodsQuantity: 0,
        orderAmount: 0,
        payAmount: 0,
        discountAmount: 0,
        buyerMessage: '',
        sellerRemark: '',
        secondRemark: ''
      },
      originalData: null,
      shopOptions: [],
      warehouseOptions: [
        { value: 'WH001', label: '仓库1' },
        { value: 'WH002', label: '仓库2' },
        { value: 'WH003', label: '仓库3' }
      ]
    }
  },
  watch: {
    deliveryOrderId: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true
    }
  },
  methods: {
    getDetail() {
      // TODO: 调用获取订单详情接口
      // getDeliveryOrderDetail(this.deliveryOrderId).then(res => {
      //   this.formData = res.data;
      //   this.originalData = JSON.parse(JSON.stringify(res.data));
      // })
      
      // 模拟数据
      const mockData = {
        documentCode: 'DO2023001',
        platformOrderCode: 'PO2023001',
        shopName: '测试店铺',
        memberName: '测试会员',
        warehouseName: '仓库1',
        logisticsCode: 'LC2023001',
        standardWeight: 1.5,
        logisticsCost: 10,
        logisticsFee: 15,
        goodsQuantity: 2,
        orderAmount: 100,
        payAmount: 95,
        discountAmount: 5,
        buyerMessage: '请尽快发货',
        sellerRemark: '已确认',
        secondRemark: ''
      };
      this.formData = mockData;
      this.originalData = JSON.parse(JSON.stringify(mockData));
    },
    
    handleEdit() {
      if (!this.formData.documentCode) {
        this.$modal.msgWarning('暂无可编辑的数据');
        return;
      }
      this.isEdit = true;
    },
    
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // TODO: 调用保存接口
          // updateDeliveryOrder(this.formData).then(res => {
          //   this.$modal.msgSuccess('保存成功');
          //   this.isEdit = false;
          //   this.getDetail();
          // })
          this.$modal.msgSuccess('保存成功');
          this.isEdit = false;
          this.originalData = JSON.parse(JSON.stringify(this.formData));
        }
      });
    },
    
    handleCancel() {
      if (this.originalData) {
        this.formData = JSON.parse(JSON.stringify(this.originalData));
        this.isEdit = false;
      } else {
        this.$modal.msgWarning('无可恢复的数据');
        this.isEdit = false;
        this.getDetail(); // 重新获取数据
      }
    },
    
    remoteShopSearch(query) {
      if (query) {
        // TODO: 调用店铺搜索接口
        // searchShops(query).then(response => {
        //   this.shopOptions = response.data.map(item => ({
        //     value: item.id,
        //     label: item.name
        //   }));
        // });
        
        // 临时使用模拟数据
        this.shopOptions = [
          { value: '1', label: '店铺A' },
          { value: '2', label: '店铺B' },
          { value: '3', label: '店铺C' }
        ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
      } else {
        this.shopOptions = [];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 20px;
  
  .el-form-item {
    margin-bottom: 18px;
  }
}
</style>
